<template>
  <div
    :id="id"
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: Number,
      default: 0
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions(value) {
      this.chart.setOption({
        tooltip: {
          formatter: '{a}{b} : {c}°'
        },
        series: [
          {
            name: '圆盘',
            type: 'gauge',
            radius: '100%',
            startAngle: 269.99,
            endAngle: -90,
            min: 0,
            max: 360,
            data: [{ value: value }],
            detail: { formatter: '{value}°', fontSize: 15 },
            splitNumber: 12,
            splitLine: {
              length: 10
            },
            pointer: {
              length: '80%',
              width: 3
            },
            axisLine: {
              lineStyle: {
                width: 15
              }
            },
            axisLabel: {
              fontSize: 15,
              formatter: function(v, idx) {
                // 去掉去掉去掉360°
                if (v === 360) {
                  return ''
                } else {
                  return v
                }
              }
            }
          }
        ]
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.setOptions(0)
    }
  }
}
</script>
